<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>量子金融分析系统 - 用户手册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        neutral: '#1F2937',
                        "neutral-light": '#F3F4F6',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-height {
                transition: max-height 0.3s ease-in-out;
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen font-sans text-gray-800">
    <!-- 导航栏 -->
    <nav id="navbar" class="fixed w-full bg-white shadow-md z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-line-chart text-primary text-2xl"></i>
                <span class="text-xl font-bold text-neutral">量子金融分析系统</span>
            </div>
            <div class="hidden md:flex space-x-6">
                <a href="#overview" class="nav-link hover:text-primary transition-colors">系统概述</a>
                <a href="#requirements" class="nav-link hover:text-primary transition-colors">系统要求</a>
                <a href="#installation" class="nav-link hover:text-primary transition-colors">安装指南</a>
                <a href="#interface" class="nav-link hover:text-primary transition-colors">界面介绍</a>
                <a href="#features" class="nav-link hover:text-primary transition-colors">功能操作</a>
                <a href="#faq" class="nav-link hover:text-primary transition-colors">常见问题</a>
            </div>
            <button id="mobile-menu-button" class="md:hidden text-gray-500 hover:text-primary">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-white border-t">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#overview" class="py-2 hover:text-primary transition-colors">系统概述</a>
                <a href="#requirements" class="py-2 hover:text-primary transition-colors">系统要求</a>
                <a href="#installation" class="py-2 hover:text-primary transition-colors">安装指南</a>
                <a href="#interface" class="py-2 hover:text-primary transition-colors">界面介绍</a>
                <a href="#features" class="py-2 hover:text-primary transition-colors">功能操作</a>
                <a href="#faq" class="py-2 hover:text-primary transition-colors">常见问题</a>
            </div>
        </div>
    </nav>

    <!-- 英雄区 -->
    <header class="pt-24 pb-16 bg-gradient-to-br from-primary to-accent text-white">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-4 text-shadow">量子金融分析系统</h1>
            <p class="text-[clamp(1rem,2vw,1.25rem)] max-w-2xl mx-auto opacity-90">专业的金融产品数据分析工具，帮助您进行实时市场监控和投资决策支持</p>
            <div class="mt-8">
                <a href="#installation" class="inline-block bg-white text-primary font-semibold px-6 py-3 rounded-lg shadow-lg hover:bg-gray-100 transition-all duration-300 transform hover:-translate-y-1">
                    开始使用 <i class="fa fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </header>

    <!-- 主内容 -->
    <main class="container mx-auto px-4 py-12">
        <!-- 系统概述 -->
        <section id="overview" class="mb-16">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-6 text-neutral flex items-center">
                    <i class="fa fa-info-circle text-primary mr-3"></i>系统概述
                </h2>
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <p class="text-lg leading-relaxed">
                        量子金融分析系统是一款专业的金融产品数据分析工具，旨在帮助用户进行实时市场监控和投资决策支持。系统提供直观的界面、强大的分析功能以及高效的数据导入导出机制，适合各类金融从业人员使用。
                    </p>
                </div>
            </div>
        </section>

        <!-- 系统要求 -->
        <section id="requirements" class="mb-16">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-6 text-neutral flex items-center">
                    <i class="fa fa-laptop text-primary mr-3"></i>系统要求
                </h2>
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
                            <div>
                                <strong class="block text-lg">操作系统</strong>
                                <span>Windows 7/8/10/11</span>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
                            <div>
                                <strong class="block text-lg">Python版本</strong>
                                <span>Python 3.8及以上</span>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
                            <div>
                                <strong class="block text-lg">内存要求</strong>
                                <span>至少4GB RAM（推荐8GB及以上）</span>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
                            <div>
                                <strong class="block text-lg">硬盘空间</strong>
                                <span>至少100MB可用空间</span>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
                            <div>
                                <strong class="block text-lg">分辨率</strong>
                                <span>1024x768及以上分辨率显示器</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- 安装指南 -->
        <section id="installation" class="mb-16">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-6 text-neutral flex items-center">
                    <i class="fa fa-cogs text-primary mr-3"></i>安装指南
                </h2>
                
                <div class="grid md:grid-cols-3 gap-6">
                    <!-- 安装Python环境 -->
                    <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                        <div class="bg-primary/10 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-code text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-4">安装Python环境</h3>
                        <ol class="list-decimal list-inside space-y-2">
                            <li>访问<a href="https://www.python.org/downloads/" class="text-primary hover:underline">Python官方网站</a>下载并安装最新版本的Python</li>
                            <li>安装过程中勾选"Add Python to PATH"</li>
                        </ol>
                    </div>

                    <!-- 安装项目依赖 -->
                    <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                        <div class="bg-secondary/10 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-puzzle-piece text-secondary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-4">安装项目依赖</h3>
                        <ol class="list-decimal list-inside space-y-2">
                            <li>打开命令提示符或终端</li>
                            <li>导航到项目目录</li>
                            <li>执行以下命令安装所需依赖：</li>
                        </ol>
                        <div class="mt-3 bg-gray-800 text-white p-3 rounded-lg font-mono text-sm overflow-x-auto">
                            pip install -r requirements.txt
                        </div>
                    </div>

                    <!-- 启动系统 -->
                    <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                        <div class="bg-accent/10 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-play-circle text-accent text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-4">启动系统</h3>
                        <ol class="list-decimal list-inside space-y-2">
                            <li>在项目目录中找到<code class="bg-gray-100 px-2 py-1 rounded">main_window.py</code>文件</li>
                            <li>双击该文件启动系统，或通过命令行执行：</li>
                        </ol>
                        <div class="mt-3 bg-gray-800 text-white p-3 rounded-lg font-mono text-sm overflow-x-auto">
                            python main_window.py
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 界面介绍 -->
        <section id="interface" class="mb-16">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-6 text-neutral flex items-center">
                    <i class="fa fa-desktop text-primary mr-3"></i>界面介绍
                </h2>
                
                <div class="bg-white rounded-xl shadow-lg p-6 mb-6 card-hover">
                    <h3 class="text-xl font-semibold mb-4">主界面布局</h3>
                    <div class="relative h-64 md:h-80 bg-gray-100 rounded-lg overflow-hidden mb-4">
                        <!-- 界面布局示意图 -->
                        <div class="absolute top-0 left-0 w-full h-[15%] bg-primary/20 flex items-center justify-center border-b border-primary/30">
                            <span class="text-primary font-semibold">顶部分框架（15%高度）</span>
                        </div>
                        <div class="absolute top-[15%] left-0 w-full h-[70%] bg-secondary/20 flex items-center justify-center border-b border-secondary/30">
                            <span class="text-secondary font-semibold">中部分框架（70%高度）</span>
                        </div>
                        <div class="absolute top-[85%] left-0 w-full h-[15%] bg-accent/20 flex items-center justify-center">
                            <span class="text-accent font-semibold">底部分框架（15%高度）</span>
                        </div>
                    </div>
                    <ul class="space-y-2">
                        <li><strong>顶部分框架</strong>（15%高度）：显示系统图标、标题和当前时间</li>
                        <li><strong>中部分框架</strong>（70%高度）：显示产品数据列表，包含产品编码、名称、上市价等信息</li>
                        <li><strong>底部分框架</strong>（15%高度）：包含查询输入框和各种功能按钮</li>
                    </ul>
                </div>

                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-semibold mb-4">界面元素说明</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-table text-primary mt-1 mr-3"></i>
                            <div>
                                <strong>产品数据列表</strong>
                                <p>以表格形式展示所有产品的关键信息</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-search text-primary mt-1 mr-3"></i>
                            <div>
                                <strong>查询输入框</strong>
                                <p>用于输入产品代码或名称进行搜索</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-buttons text-primary mt-1 mr-3"></i>
                            <div>
                                <strong>功能按钮</strong>
                                <p>包含查询、添加、删除、买入、卖出和分析报告等操作按钮</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- 功能操作指南 -->
        <section id="features" class="mb-16">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-6 text-neutral flex items-center">
                    <i class="fa fa-tasks text-primary mr-3"></i>功能操作指南
                </h2>
                
                <!-- 产品查询 -->
                <div class="bg-white rounded-xl shadow-lg p-6 mb-6 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="bg-primary/10 w-10 h-10 rounded-full flex items-center justify-center mr-4">
                            <i class="fa fa-search text-primary"></i>
                        </div>
                        <h3 class="text-xl font-semibold">产品查询</h3>
                    </div>
                    <ol class="list-decimal list-inside space-y-2 ml-4">
                        <li>在底部的查询输入框中输入产品代码或名称</li>
                        <li>点击"查询"按钮或按回车键</li>
                        <li>系统将立即显示匹配的产品信息</li>
                    </ol>
                </div>

                <!-- 产品管理 -->
                <div class="bg-white rounded-xl shadow-lg p-6 mb-6 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="bg-secondary/10 w-10 h-10 rounded-full flex items-center justify-center mr-4">
                            <i class="fa fa-cubes text-secondary"></i>
                        </div>
                        <h3 class="text-xl font-semibold">产品管理</h3>
                    </div>
                    <ul class="space-y-3 ml-4">
                        <li class="flex items-start">
                            <i class="fa fa-plus-circle text-secondary mt-1 mr-3"></i>
                            <div>
                                <strong>添加产品</strong>
                                <p>点击"添加产品"按钮，按照提示输入产品信息并保存</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-minus-circle text-secondary mt-1 mr-3"></i>
                            <div>
                                <strong>删除产品</strong>
                                <p>选择要删除的产品行，点击"删除产品"按钮，确认后删除</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-arrow-down text-secondary mt-1 mr-3"></i>
                            <div>
                                <strong>买入操作</strong>
                                <p>选择目标产品，点击"买入"按钮，输入买入数量和价格</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-arrow-up text-secondary mt-1 mr-3"></i>
                            <div>
                                <strong>卖出操作</strong>
                                <p>选择目标产品，点击"卖出"按钮，输入卖出数量和价格</p>
                            </div>
                        </li>
                    </ul>
                </div>

                <!-- 数据分析 -->
                <div class="bg-white rounded-xl shadow-lg p-6 mb-6 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="bg-accent/10 w-10 h-10 rounded-full flex items-center justify-center mr-4">
                            <i class="fa fa-bar-chart text-accent"></i>
                        </div>
                        <h3 class="text-xl font-semibold">数据分析</h3>
                    </div>
                    <ol class="list-decimal list-inside space-y-2 ml-4">
                        <li>选择需要分析的产品</li>
                        <li>点击"分析报告"按钮</li>
                        <li>系统将生成该产品的详细分析报告</li>
                        <li>在分析报告页面可以查看分析结果和导出报告</li>
                    </ol>
                </div>

                <!-- 数据导入/导出 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="bg-primary/10 w-10 h-10 rounded-full flex items-center justify-center mr-4">
                            <i class="fa fa-exchange text-primary"></i>
                        </div>
                        <h3 class="text-xl font-semibold">数据导入/导出</h3>
                    </div>
                    
                    <!-- 数据导入 -->
                    <div class="mb-6">
                        <h4 class="font-semibold text-lg mb-2 flex items-center">
                            <i class="fa fa-download text-primary mr-2"></i>数据导入
                        </h4>
                        <ol class="list-decimal list-inside space-y-2 ml-4">
                            <li>点击"导入数据"按钮</li>
                            <li>在弹出的文件对话框中选择要导入的文件（支持JSON、CSV、Excel格式）</li>
                            <li>系统将异步处理导入数据，不会阻塞UI响应</li>
                            <li>导入完成后，系统会显示导入成功提示和导入的数据量</li>
                        </ol>
                    </div>
                    
                    <!-- 数据导出 -->
                    <div class="mb-6">
                        <h4 class="font-semibold text-lg mb-2 flex items-center">
                            <i class="fa fa-upload text-primary mr-2"></i>数据导出
                        </h4>
                        <ol class="list-decimal list-inside space-y-2 ml-4">
                            <li>选择要导出的数据范围</li>
                            <li>点击"导出数据"按钮</li>
                            <li>在弹出的文件保存对话框中选择保存位置和文件格式（JSON、CSV、Excel）</li>
                            <li>系统将异步处理导出数据</li>
                            <li>导出完成后，系统会显示导出成功提示和文件保存位置</li>
                        </ol>
                    </div>
                    
                    <!-- 分析报告导出 -->
                    <div>
                        <h4 class="font-semibold text-lg mb-2 flex items-center">
                            <i class="fa fa-file-text-o text-primary mr-2"></i>分析报告导出
                        </h4>
                        <ol class="list-decimal list-inside space-y-2 ml-4">
                            <li>在分析报告页面点击"导出报告"按钮</li>
                            <li>选择保存位置</li>
                            <li>系统将分析报告导出为HTML文件格式</li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>

        <!-- 异步操作说明 -->
        <section id="async" class="mb-16">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-6 text-neutral flex items-center">
                    <i class="fa fa-clock-o text-primary mr-3"></i>异步操作说明
                </h2>
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <p class="text-lg mb-4">本系统的所有导入/导出操作均采用异步处理方式，这意味着：</p>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>在处理大量数据时，UI界面仍然能够保持响应</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>导入/导出过程中可以继续进行其他操作</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>操作完成后系统会给出相应的提示信息</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>即使数据量较大，也不会导致程序假死或崩溃</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- 常见问题解答 -->
        <section id="faq" class="mb-16">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-6 text-neutral flex items-center">
                    <i class="fa fa-question-circle text-primary mr-3"></i>常见问题解答
                </h2>
                
                <div class="space-y-4">
                    <!-- FAQ 项 1 -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                        <button class="faq-toggle w-full text-left px-6 py-4 focus:outline-none flex justify-between items-center">
                            <span class="font-semibold text-lg">导入文件时提示格式错误</span>
                            <i class="fa fa-chevron-down text-gray-500 transition-transform duration-300"></i>
                        </button>
                        <div class="faq-content px-6 py-0 max-h-0 overflow-hidden transition-all duration-300">
                            <div class="py-4">
                                <strong class="text-primary block mb-2">解决方法：</strong>
                                <p>确保导入的文件格式为系统支持的JSON、CSV或Excel格式，并检查文件内容是否符合数据结构要求。</p>
                            </div>
                        </div>
                    </div>

                    <!-- FAQ 项 2 -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                        <button class="faq-toggle w-full text-left px-6 py-4 focus:outline-none flex justify-between items-center">
                            <span class="font-semibold text-lg">导出的Excel文件无法打开</span>
                            <i class="fa fa-chevron-down text-gray-500 transition-transform duration-300"></i>
                        </button>
                        <div class="faq-content px-6 py-0 max-h-0 overflow-hidden transition-all duration-300">
                            <div class="py-4">
                                <strong class="text-primary block mb-2">解决方法：</strong>
                                <p>确认导出的文件扩展名为.xlsx，尝试使用最新版本的Excel或WPS Office打开。</p>
                            </div>
                        </div>
                    </div>

                    <!-- FAQ 项 3 -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                        <button class="faq-toggle w-full text-left px-6 py-4 focus:outline-none flex justify-between items-center">
                            <span class="font-semibold text-lg">系统运行缓慢</span>
                            <i class="fa fa-chevron-down text-gray-500 transition-transform duration-300"></i>
                        </button>
                        <div class="faq-content px-6 py-0 max-h-0 overflow-hidden transition-all duration-300">
                            <div class="py-4">
                                <strong class="text-primary block mb-2">解决方法：</strong>
                                <ul class="list-disc list-inside space-y-1">
                                    <li>关闭其他占用系统资源的程序</li>
                                    <li>减少同时处理的数据量</li>
                                    <li>确保系统内存充足</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- FAQ 项 4 -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                        <button class="faq-toggle w-full text-left px-6 py-4 focus:outline-none flex justify-between items-center">
                            <span class="font-semibold text-lg">导入/导出过程中出现程序崩溃</span>
                            <i class="fa fa-chevron-down text-gray-500 transition-transform duration-300"></i>
                        </button>
                        <div class="faq-content px-6 py-0 max-h-0 overflow-hidden transition-all duration-300">
                            <div class="py-4">
                                <strong class="text-primary block mb-2">解决方法：</strong>
                                <ul class="list-disc list-inside space-y-1">
                                    <li>检查文件大小是否过大（建议单次导入不超过10,000条数据）</li>
                                    <li>确保磁盘空间充足</li>
                                    <li>检查文件权限是否正确</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 技术支持 -->
        <section id="support" class="mb-16">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-6 text-neutral flex items-center">
                    <i class="fa fa-life-ring text-primary mr-3"></i>技术支持
                </h2>
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <p class="text-lg mb-6">如遇到任何问题或需要技术支持，请联系我们的开发团队：</p>
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="flex flex-col items-center justify-center p-4 bg-primary/5 rounded-lg">
                            <i class="fa fa-envelope text-primary text-3xl mb-3"></i>
                            <h3 class="font-semibold mb-2">电子邮件</h3>
                            <a href="mailto:support@quantumfinance.com" class="text-primary hover:underline">support@quantumfinance.com</a>
                        </div>
                        <div class="flex flex-col items-center justify-center p-4 bg-primary/5 rounded-lg">
                            <i class="fa fa-clock-o text-primary text-3xl mb-3"></i>
                            <h3 class="font-semibold mb-2">工作时间</h3>
                            <p>周一至周五 9:00-18:00</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-neutral text-white py-12">
        <div class="container mx-auto px-4">
            <div class="max-w-4xl mx-auto">
                <div class="flex flex-col md:flex-row justify-between items-center mb-8">
                    <div class="flex items-center mb-4 md:mb-0">
                        <i class="fa fa-line-chart text-primary text-2xl mr-2"></i>
                        <span class="text-xl font-bold">量子金融分析系统</span>
                    </div>
                    <div class="flex space-x-6">
                        <a href="#overview" class="hover:text-primary transition-colors">系统概述</a>
                        <a href="#installation" class="hover:text-primary transition-colors">安装指南</a>
                        <a href="#features" class="hover:text-primary transition-colors">功能操作</a>
                        <a href="#faq" class="hover:text-primary transition-colors">常见问题</a>
                    </div>
                </div>
                
                <hr class="border-gray-700 mb-8">
                
                <div class="text-center">
                    <h3 class="text-lg font-semibold mb-4">更新日志</h3>
                    <div class="bg-gray-800 p-4 rounded-lg mb-8">
                        <h4 class="font-semibold mb-2">版本 1.0.0 (2025-08-21)</h4>
                        <ul class="list-disc list-inside space-y-1 text-gray-300">
                            <li>初始版本发布</li>
                            <li>实现核心产品查询和分析功能</li>
                            <li>添加数据导入/导出功能</li>
                            <li>实现异步处理机制，提升用户体验</li>
                        </ul>
                    </div>
                    
                    <p>&copy; 2025 量子金融分析系统. 保留所有权利。</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-6 right-6 bg-primary text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300 hover:bg-primary/90 focus:outline-none">
        <i class="fa fa-arrow-up"></i>
    </button>

    <!-- JavaScript -->
    <script>
        // 移动菜单切换
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');

        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // FAQ 手风琴效果
        const faqToggles = document.querySelectorAll('.faq-toggle');

        faqToggles.forEach(toggle => {
            toggle.addEventListener('click', () => {
                const content = toggle.nextElementSibling;
                const icon = toggle.querySelector('i');
                
                // 切换当前FAQ项的显示状态
                if (content.style.maxHeight) {
                    content.style.maxHeight = null;
                    content.style.paddingTop = '0';
                    content.style.paddingBottom = '0';
                    icon.style.transform = 'rotate(0deg)';
                } else {
                    content.style.maxHeight = content.scrollHeight + 'px';
                    content.style.paddingTop = '16px';
                    content.style.paddingBottom = '16px';
                    icon.style.transform = 'rotate(180deg)';
                }
            });
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                // 关闭移动菜单
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('hidden');
                }
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80, // 考虑导航栏高度
                        behavior: 'smooth'
                    });
                }
            });
        });

        // 返回顶部按钮
        const backToTopButton = document.getElementById('back-to-top');
        
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTopButton.classList.remove('opacity-0', 'invisible');
                backToTopButton.classList.add('opacity-100', 'visible');
            } else {
                backToTopButton.classList.remove('opacity-100', 'visible');
                backToTopButton.classList.add('opacity-0', 'invisible');
            }
        });
        
        backToTopButton.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        let lastScrollTop = 0;
        
        window.addEventListener('scroll', () => {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            
            if (scrollTop > 100) {
                navbar.classList.add('py-2', 'shadow-lg');
                navbar.classList.remove('py-3', 'shadow-md');
            } else {
                navbar.classList.add('py-3', 'shadow-md');
                navbar.classList.remove('py-2', 'shadow-lg');
            }
            
            lastScrollTop = scrollTop;
        });
    </script>
</body>
</html>